<template>
  <window-header />
  <title-panel :title="userName" />
  <div class="app-container">
    <n-alert title="多窗口实现的说明" type="info">
      本弹框仅演示同一个窗口多开的功能，通过多传参数实现，具体的信息内容及展示、数据同步、操作方式等，需要自己把控细节
    </n-alert>
    <div style="margin-top: 16px;">用户id：{{ userId }}</div>
    <div>用户名：{{ userName }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const userId = ref()
const userName = ref()

import { useRoute } from 'vue-router';
const route = useRoute();

onMounted(() => {
  const query = route?.query;
  userId.value = query.userId;
  userName.value = query.userName;
})
</script>

<style scoped>

</style>
